<script setup>
import {onMounted, ref, getCurrentInstance, computed} from "vue"
import IndentState from "./IndentState.vue"
// const hotel = ref([
//   {
//     name:"HOTELNAME",
//   },
  // {
  // name:"HOTELNAME"
  // },{
  //   name:"HOTELNAME",
  // },{
  //   name:"HOTELNAME",
  // },
// ])
// const roomType = ref([
//   {
//     type:"VIP",
//     bedType:"BIGED",
//     breakfast:1,
//     capacity:100,
//
//   },
  // {
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // },{
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // },{
  //   type:"NORM",
  //   bedType:"SMALLBED",
  //   breakfast:0,
  //   capacity:7,
  // }
// ])
// const indentBatchVOList = ref([
//   {
//     indentBatch: [
//       {
//         id:1,
//         commentId:2,
//         userId:3,
//         batchId:4,
//         roomTypeId:5,
//         description:"des1",
//         amount:6,
//         checkInTime:new Date(),
//         checkOutTime:new Date(),
//         indentBatchGenerationTime:new Date(),
//         indentState:"CANCELED",
//         hotelId:7,
//       },
//       {
//         id:1,
//         commentId:2,
//         userId:3,
//         batchId:4,
//         roomTypeId:5,
//         description:"des1",
//         amount:6,
//         checkInTime:new Date(),
//         checkOutTime:new Date(),
//         indentBatchGenerationTime:new Date(),
//         indentState:"CANCELED",
//         hotelId:7,
//       }
//     ],
//     totalAmount: 100.1,
//
//   },
  // {
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },{
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },{
  //   indentBatch: [
  //     {
  //       id:1,
  //       commentId:2,
  //       userId:3,
  //       batchId:4,
  //       roomTypeId:5,
  //       description:"des1",
  //       amount:6,
  //       checkInTime:new Date(),
  //       checkOutTime:new Date(),
  //       indentBatchGenerationTime:new Date(),
  //       indentState:"CREATED",
  //       hotelId:7,
  //     },
  //   ],
  //   totalAmount: 200.1,
  //
  // },
// ])
const indentBatchVOList=ref([])
const hotel=ref([])
const roomType=ref([])
const indentBatchVOListCache = ref([])
const { proxy } = getCurrentInstance()
const loaded = ref(false)

const loadData = async () => {
  let resp = await proxy.$http.get("/api/indent/userbatch?userId=" + 1)
  if (resp && resp.data && resp.data.code === 200) {
    indentBatchVOList.value = resp.data.data
    if (indentBatchVOList.value) {
      for (const vo of indentBatchVOList.value) {
        resp = await proxy.$http.get("/api/hotel?id=" + vo.indentBatch[0].hotelId)
        if (resp && resp.data && resp.data.code === 200) {
          hotel.value.push(resp.data.data)
        }
      }

      for (const vo of indentBatchVOList.value) {
        resp = await proxy.$http.get("/api/roomType/" + vo.indentBatch[0].roomtypeId)
        if (resp && resp.data && resp.data.code === 200) {
          roomType.value.push(resp.data.data)
        }
      }
    }
  }
}

onMounted(async () => {
  await loadData()
  loaded.value = true
})

// const props = defineProps({
//   indentBatchVOList:{
//     type:Array,
//     default:()=>[]
//   },
//   hotel:{
//     type:Array,
//     default:()=>[]
//   },
//   roomType:{
//     type:Array,
//     default:()=>[]
//   },
// })
const props = defineProps({
  userId: {
    type: Number,
    default: 1,
  },
})
const first=ref(true)

const loadIndentBatchVO = () => {
  let last = indentBatchVOListCache.value.length
  let total = indentBatchVOList.value.length

  if (last < total) {
    indentBatchVOListCache.value.push(
        indentBatchVOList.value[last]
    )
  }
}
const activeOrder = ref(0)

// const getHotelById = (id,index)=>{
//
//   proxy.$http.get(
//       '/api/hotel?id='+id
//   ).then(res=>{
//     hotel.push(res.data.data)
//     console.log("hotel"+index)
//     console.log( hotel[index])
//     console.log( res.data.data)
//   })
//   return hotel[index]
//
// }
// const getRoomTypeById = (id,index)=>{
//
//   proxy.$http.get(
//       '/api/roomType/'+id
//   ).then(res=>{
//     roomType.value.push(res.data.data)
//     console.log("ROOMTYPE")
//     console.log( roomType.value[index])
//     console.log( res.data.data)
//   })
//   return roomType.value[index]
//
// }
const timeFormat = (intime) => {
  // console.log(intime)
  var mystime = new Date(intime)

  var addstime =
      mystime.getFullYear() +
      "-" +
      fullNum(Number(mystime.getMonth()) + 1) +
      "-" +
      fullNum(mystime.getDate()) +
      " " +
      fullNum(mystime.getHours()) +
      ":" +
      fullNum(mystime.getMinutes()) +
      ":" +
      fullNum(mystime.getSeconds())
  return addstime
}
const fullNum = (obj) => {
  if (Number(obj) < 10) {
    return "0" + obj
  } else {
    return obj
  }
}

const hasBreakfast = (b) => {
  if (b == 1) return "含早餐"
  else return "不含早餐"
}
const mymymy = () => {
  // console.log( hotel)
  // console.log( roomType)
  // console.log( indentBatchVOList)
}
</script>

<template>
  <!--    <div><el-button @click="printit">dododo</el-button></div>-->
  <div>

    <ul v-if="loaded" v-infinite-scroll="loadIndentBatchVO" class="infinite-list">
      <el-collapse
          v-model="activeOrder"
          v-for="(item, index) in indentBatchVOListCache"
      >
        <el-collapse-item :name="index">
          <template #title>
            <span>{{ hotel[index].name }}</span>
            <span width="10rem"></span>
            <span>{{ roomType[index].type }}</span>
            <span>{{
                timeFormat(item.indentBatch[0].indentBatchGenerationTime)
              }}</span>
            <span class="price">￥ {{ item.totalAmount }}</span>
            <IndentState
                :indentState="item.indentBatch[0].indentState"
                :fontSize="10"
            />
          </template>
          <div>
            <div id="orderForm">
              <div class="air-column">
                <el-descriptions :title="hotel[index].name" :column="4">
                  <el-descriptions-item label="房间类型">{{
                      roomType[index].type
                    }}</el-descriptions-item>
                  <el-descriptions-item label="可住人数"
                  >{{ roomType[index].capacity }}人</el-descriptions-item
                  >
                  <el-descriptions-item label="床型">{{
                      roomType[index].bedType
                    }}</el-descriptions-item>
                  <el-descriptions-item label="早餐">
                    <el-tag size="small">{{
                        hasBreakfast(roomType[index].breakfast)
                      }}</el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <div class="air-column">
                <el-descriptions :title="'预订信息'" :column="4">
                  <el-descriptions-item label="入住时间"
                  ><el-date-picker
                      class="input-with-select"
                      v-model="item.indentBatch[0].checkInTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      disabled="true"
                  >
                  </el-date-picker>
                  </el-descriptions-item>

                  <el-descriptions-item label="退房时间">
                    <el-date-picker
                        class="input-with-select"
                        v-model="item.indentBatch[0].checkOutTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        disabled="true"
                    >
                    </el-date-picker>
                  </el-descriptions-item>

                  <el-descriptions-item label="房间数量"
                  ><el-input-number
                      class="input-with-select"
                      v-model="item.indentBatch.length"
                      @change="handleChange"
                      :min="1"
                      :max="10"
                      disabled="true"
                  ></el-input-number>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </ul>
  </div>
</template>
<style>
.price {
  font-size: 28px;
  color: orange;
}
</style>
